<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      404 | Page Not Found | Ministry of External Affairs, Government of India
    </title>
    <script src="Javascript/lottie.min.js"></script>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --bg: #ffffff;
        --primary: #e8efff;
        --secondary: #214aab;
        --secondary-hover: #1a3d8f;
        --text-dark: #1a2340;
        --text-body: #4a5578;
        --text-muted: #8a94b0;
        --border: rgba(33, 74, 171, 0.11);
        --shadow-lg: 0 8px 48px rgba(33, 74, 171, 0.11);
      }
      html,
      body {
        height: 100%;
        background: var(--bg);
        font-family: "Google Sans Flex", sans-serif;
        color: var(--text-dark);
      }

      .bg-decor {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      .bg-circle {
        position: absolute;
        border-radius: 50%;
        background: var(--primary);
      }
      .bg-circle.c1 {
        width: 580px;
        height: 580px;
        top: -240px;
        right: -180px;
        opacity: 0.6;
        animation: fa 22s ease-in-out infinite alternate;
      }
      .bg-circle.c2 {
        width: 360px;
        height: 360px;
        bottom: -130px;
        left: -100px;
        opacity: 0.38;
        animation: fb 26s ease-in-out infinite alternate;
      }
      .bg-circle.c3 {
        width: 140px;
        height: 140px;
        top: 40%;
        left: 7%;
        opacity: 0.22;
        animation: fc 17s ease-in-out infinite alternate;
      }
      .bg-line {
        position: absolute;
        background: var(--border);
      }
      .bg-line.l1 {
        width: 1px;
        height: 100vh;
        left: 18%;
        top: 0;
      }
      .bg-line.l2 {
        width: 1px;
        height: 100vh;
        right: 18%;
        top: 0;
      }
      .bg-line.l3 {
        height: 1px;
        width: 100vw;
        top: 20%;
        left: 0;
      }
      @keyframes fa {
        from {
          transform: translate(0, 0) scale(1);
        }
        to {
          transform: translate(-28px, 18px) scale(1.04);
        }
      }
      @keyframes fb {
        from {
          transform: translate(0, 0);
        }
        to {
          transform: translate(18px, -22px);
        }
      }
      @keyframes fc {
        from {
          transform: translate(0, 0) scale(1);
        }
        to {
          transform: translate(12px, 14px) scale(1.1);
        }
      }

      .page {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }

      .card {
        background: #fff;
        border: 1px solid var(--border);
        /* border-radius: 24px; */
        padding: 3rem 3.5rem 3.2rem;
        max-width: 580px;
        width: 100%;
        text-align: center;
        box-shadow: var(--shadow-lg);
        animation: cardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        opacity: 0;
        transform: translateY(24px);
      }
      @keyframes cardIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      #lottie-wrap {
        width: 230px;
        height: 135px;
        margin: 0 auto 0.6rem;
        position: relative;
      }
      h1 {
        font-size: clamp(1.65rem, 4.2vw, 2.2rem);
        font-weight: 700;
        line-height: 1.22;
        letter-spacing: -0.025em;
        color: var(--text-dark);
        margin-bottom: 0.8rem;
        animation: up 0.55s 0.38s both;
      }
      h1 em {
        font-style: normal;
        color: var(--secondary);
      }

      .rule {
        width: 44px;
        height: 3px;
        background: linear-gradient(
          90deg,
          var(--secondary),
          rgba(33, 74, 171, 0.25)
        );
        /* border-radius: 3px; */
        margin: 0 auto 1rem;
        animation: up 0.55s 0.5s both;
      }

      p {
        font-size: 0.93rem;
        line-height: 1.76;
        color: var(--text-body);
        font-weight: 400;
        max-width: 460px;
        margin: 0 auto 2rem;
        animation: up 0.55s 0.62s both;
      }
      p strong {
        color: var(--text-dark);
        font-weight: 600;
      }

      .btn-group {
        display: flex;
        gap: 0.85rem;
        justify-content: center;
        flex-wrap: wrap;
        animation: up 0.55s 0.75s both;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 26px;
        /* border-radius: 10px; */
        font-family: "Google Sans Flex", sans-serif;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
        border: none;
        outline: none;
        text-decoration: none;
      }
      .btn:active {
        transform: scale(0.97) !important;
      }

      .btn-primary {
        background: var(--secondary);
        color: #fff;
        box-shadow: 0 3px 16px rgba(33, 74, 171, 0.26);
      }
      .btn-primary:hover {
        background: var(--secondary-hover);
        box-shadow: 0 5px 24px rgba(33, 74, 171, 0.36);
        transform: translateY(-2px);
      }

      .btn-ghost {
        background: var(--primary);
        color: var(--secondary);
        border: 1px solid rgba(33, 74, 171, 0.18);
      }
      .btn-ghost:hover {
        background: #dce7ff;
        border-color: rgba(33, 74, 171, 0.3);
        transform: translateY(-2px);
      }

      .note {
        margin-top: 1.6rem;
        font-size: 0.78rem;
        color: var(--text-muted);
        animation: up 0.55s 0.88s both;
      }
      .note a {
        color: var(--secondary);
        text-decoration: none;
        font-weight: 500;
      }
      .note a:hover {
        text-decoration: underline;
      }

      @keyframes up {
        from {
          opacity: 0;
          transform: translateY(12px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* glass circle */
      .mag-glass {
        animation: magFloat 3s ease-in-out infinite;
        transform-origin: 95px 80px;
      }
      @keyframes magFloat {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        25% {
          transform: translate(4px, -6px) rotate(2deg);
        }
        50% {
          transform: translate(-3px, -10px) rotate(-1deg);
        }
        75% {
          transform: translate(-5px, -4px) rotate(1.5deg);
        }
      }

      /* search lines inside glass */
      .search-line {
        stroke-dasharray: 22;
        stroke-dashoffset: 22;
        animation: drawLine 1.8s ease forwards infinite;
      }
      .search-line:nth-child(1) {
        animation-delay: 0s;
      }
      .search-line:nth-child(2) {
        animation-delay: 0.28s;
      }
      .search-line:nth-child(3) {
        animation-delay: 0.56s;
      }
      @keyframes drawLine {
        0% {
          stroke-dashoffset: 22;
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        60% {
          stroke-dashoffset: 0;
          opacity: 1;
        }
        85% {
          stroke-dashoffset: 0;
          opacity: 0.4;
        }
        100% {
          stroke-dashoffset: 22;
          opacity: 0;
        }
      }

      /* question mark fade */
      /* .qmark {
      animation: qPulse 3s ease-in-out infinite;
      transform-origin: 90px 72px;
    }
    @keyframes qPulse {
      0%,100% { opacity:0; transform:scale(.7); }
      40%,60% { opacity:1; transform:scale(1); }
    } */

      /* handle */
      .mag-handle {
        animation: handleSwing 3s ease-in-out infinite;
        transform-origin: 118px 106px;
      }
      @keyframes handleSwing {
        0%,
        100% {
          transform: rotate(0deg);
        }
        25% {
          transform: rotate(3deg);
        }
        50% {
          transform: rotate(-2deg);
        }
        75% {
          transform: rotate(2deg);
        }
      }

      /* dots orbiting */
      .dot-orbit {
        animation: orbit 4s linear infinite;
        transform-origin: 90px 80px;
      }
      .dot-orbit.d2 {
        animation-delay: -1.33s;
      }
      .dot-orbit.d3 {
        animation-delay: -2.66s;
      }
      @keyframes orbit {
        from {
          transform: rotate(0deg) translateX(54px) rotate(0deg);
        }
        to {
          transform: rotate(360deg) translateX(54px) rotate(-360deg);
        }
      }

      .logo {
        max-width: 320px;
        margin: 0 auto;
      }
      .logo a {
        display: flex;
        align-items: center;
        justify-content: start;
        max-width: 350px;
        width: 100%;
        transition: all 0.3s ease;
        gap: 12px;
        color: #323232;
        text-decoration: none;
        text-align: left;
      }

      .logo a span.logo-title-wrap {
        display: flex;
        flex-direction: column;
      }

      .logo a span.logo-title-wrap .gov-title {
        font-size: 16px;
      }

      .logo a span.logo-title-wrap .gov-mea-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
      }
      .card {
        position: relative;
      }
      .animateBlock {
        position: absolute;
        right: -75px;
        top: -55px;
      }
      @media (max-width: 767px) {
        .card {
          padding: 2rem 1.4rem;
          max-width: 500px;
          width: 100%;
        }
        .animateBlock {
          width: 120px;
          right: -50px;
          top: -50px;
          height: 120px;
        }
        .animateBlock svg {
          width: 100%;
          height: 100%;
        }
      }
      @media (max-width: 600px) {
        .animateBlock {
          display: none;
        }
      }
      @media (max-width: 575px) {
        .page {
          padding: 1.5rem;
        }
        .btn-group {
          flex-direction: column;
          align-items: stretch;
        }
        .btn {
          justify-content: center;
        }
        #lottie-wrap {
          width: 185px;
          height: 135px;
        }
        .bg-line {
          display: none;
        }
        .logo a {
          flex-direction: column;
          text-align: center;
        }
        h1 {
          font-size: 22px;
        }
        p {
          font-size: 14px;
        }
        .card {
          padding: 1.5rem 1rem;
        }
        .logo a span.logo-title-wrap .gov-mea-title {
          font-size: 18px;
        }
        .logo a span.logo-title-wrap .gov-title {
          font-size: 14px;
        }
      }
    </style>
  </head>
  <body>
    <div class="bg-decor">
      <div class="bg-circle c1"></div>
      <div class="bg-circle c2"></div>
      <div class="bg-circle c3"></div>
      <div class="bg-line l1"></div>
      <div class="bg-line l2"></div>
      <div class="bg-line l3"></div>
    </div>

    <div class="page">
      <div class="card">
        <div class="logo">
          <a
            href="index"
            title="Ministry of External Affairs, Government of India"
          >
            <img
              src="images/Emblem_of_India.svg"
              alt="Ministry of External Affairs, Government of India"
            />
            <span class="logo-title-wrap">
              <span class="gov-mea-title">Ministry of External Affairs</span>
              <span class="gov-title">Government of India</span>
            </span>
          </a>
        </div>

        <div class="animateBlock">
          <svg
            class="mag-svg"
            width="190"
            height="170"
            viewBox="0 0 190 170"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <!-- orbiting dots (behind glass) -->
            <g class="dot-orbit d1">
              <circle
                cx="90"
                cy="80"
                r="3.5"
                fill="#e8efff"
                stroke="#214aab"
                stroke-width="1.2"
                opacity=".5"
              ></circle>
            </g>
            <g class="dot-orbit d2">
              <circle
                cx="90"
                cy="80"
                r="3"
                fill="#e8efff"
                stroke="#214aab"
                stroke-width="1.2"
                opacity=".4"
              ></circle>
            </g>
            <g class="dot-orbit d3">
              <circle
                cx="90"
                cy="80"
                r="2.5"
                fill="#e8efff"
                stroke="#214aab"
                stroke-width="1.2"
                opacity=".35"
              ></circle>
            </g>

            <!-- magnifier group -->
            <g class="mag-glass">
              <!-- outer glow ring -->
              <circle
                cx="90"
                cy="80"
                r="46"
                fill="rgba(33,74,171,.06)"
              ></circle>

              <!-- glass background -->
              <circle
                cx="90"
                cy="80"
                r="38"
                fill="#f4f7ff"
                stroke="#214aab"
                stroke-width="2.8"
              ></circle>

              <!-- inner subtle ring -->
              <circle
                cx="90"
                cy="80"
                r="32"
                fill="none"
                stroke="rgba(33,74,171,.08)"
                stroke-width="1"
              ></circle>

              <!-- search lines inside -->
              <!-- <line class="search-line" x1="74" y1="70" x2="96" y2="70" stroke="#214aab" stroke-width="2.2" stroke-linecap="round"></line>
          <line class="search-line" x1="74" y1="79" x2="106" y2="79" stroke="#214aab" stroke-width="2.2" stroke-linecap="round"></line>
          <line class="search-line" x1="74" y1="88" x2="88" y2="88" stroke="#214aab" stroke-width="2.2" stroke-linecap="round"></line> -->

              <!-- question mark (fades in when lines disappear) -->
              <g class="qmark">
                <text
                  x="84"
                  y="88"
                  font-family="Google Sans Flex, sans-serif"
                  font-size="22"
                  font-weight="700"
                  fill="#214aab"
                  opacity="1"
                >
                  ?
                </text>
              </g>

              <!-- glass shine -->
              <ellipse
                cx="78"
                cy="66"
                rx="9"
                ry="5.5"
                fill="white"
                opacity=".45"
                transform="rotate(-30 78 66)"
              ></ellipse>
            </g>

            <!-- handle group -->
            <g class="mag-handle">
              <line
                x1="120"
                y1="108"
                x2="148"
                y2="140"
                stroke="#214aab"
                stroke-width="7"
                stroke-linecap="round"
              ></line>
              <!-- handle grip lines -->
              <line
                x1="126"
                y1="116"
                x2="130"
                y2="120"
                stroke="white"
                stroke-width="1.5"
                stroke-linecap="round"
                opacity=".5"
              ></line>
              <line
                x1="132"
                y1="122"
                x2="136"
                y2="126"
                stroke="white"
                stroke-width="1.5"
                stroke-linecap="round"
                opacity=".5"
              ></line>
            </g>
          </svg>
        </div>
        <div id="lottie-wrap"></div>

        <h1>Sorry for the <em>Inconvenience.</em></h1>

        <div class="rule"></div>

        <p>
          The page you're looking for is <strong>unavailable right now</strong>. It may have been
          moved, removed, or may no longer exist. Please try again later or go
          to the Homepage and use the site navigation to find what you need.
        </p>

        <div class="btn-group">
          <a href="https://www.mea.gov.in" class="btn btn-primary"> Go to Homepage </a>
          <!-- <a href="feedback" class="btn btn-ghost">
        Write to us
      </a> -->
        </div>
      </div>
    </div>

    <script>
      lottie.loadAnimation({
        container: document.getElementById("lottie-wrap"),
        renderer: "svg",
        loop: true,
        autoplay: true,
        path: "Javascript/404-lottie.json",
      });
    </script>
  </body>
</html>
